<template>
  <div class="event-item" :style="{'margin-left': 100+side*470+'px'}" :class="{'margin-2-2':totalSides===2&&side===1}">
    <div class="event-circle" :class="{done: state===3,doing: state===2,todo: state===1,'circle-2-2':totalSides===2&&side===1,'circle-2-1':totalSides===2&&side===0}" :style="{left: -44-470*side+'px'}"></div>
    <div class="event-line" :class="{done: state===3,doing: state===2,todo: state===1,'line-2-2':totalSides===2&&side===1,'line-2-1':totalSides===2&&side===0}" :style="{left: -44-470*side+'px',width: 44+470*side+'px'}"></div>
    <div class="event-box">
      <div class="event" :class="{fr:side===0&&totalSides===2,'text-right':side===0&&totalSides===2}">
        <div class="side">{{side | sideFilter}}</div>
        <p class="event-content">{{content}}</p>
      </div>
      <div class="file-box" :class="{fr:side===0&&totalSides===2,'text-right':side===0&&totalSides===2}">
        <file-num :fileNum="files.length" v-if="!isEdit"></file-num>
      </div>
      <div class="btn-box" :class="{fr:side===0&&totalSides===2,'text-right':side===0&&totalSides===2}">
        <template v-if="isEdit">
          <button type="button" class="btn" @click="onEdit">编辑</button>
          <div>
            <button type="button" class="btn" @click="onDelete">删除</button>
          </div>
        </template>
        <template v-else-if="isAudit">
          <template v-if="state===2">
            <button type="button" class="btn" @click="onStartAudit">去审核</button>
            <div>
              <button type="button" class="btn" @click="finishShow=true">审核完成</button>
            </div>
          </template>
          <template v-if="state===3">
            <button type="button" class="btn btn-margin-top" @click="onCheckAudit">查看</button>
          </template>
        </template>
        <template v-else>
          <button type="button" class="btn" :class="{'btn-margin-top': state===3||(state===2&&currentSide!==side)||allState!==3}" v-if="state!==1" @click="onCheck">查看</button>
          <div :class="{'btn-margin-top': state===1}" v-if="showUpload">
            <button type="button" class="btn" :id="'uploaderBtn'+eventId">上传</button>
          </div>
        </template>
      </div>
    </div>
    <vodal :show="showFiles" animation="zoom" :width="600" :height="500" @hide="showFiles = false">
      <file-browser type="browser" :files="files" ref="fileBrowser"></file-browser>
    </vodal>
    <vodal :show="finishShow" animation="zoom" :width="380" :height="100" @hide="finishShow = false">
      <div class="vodal-main vodal-xxbox">
        <h4>确定要完成审核吗？</h4>
        <div class="tc auto vodal-btn-box finish">
          <button class="blue-button" @click="onDoneAudit">确认</button>
          <button class="white-button" @click="finishShow = false">取消</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import FileNum from './FileNum'
import FileUploadManager from './FileUploaderManager'
import FileBrowser from './FileBrowser'
export default {
  components: {
    FileNum,
    FileBrowser
  },
  props: {
    tradeType: String, // law   表示是法律服务还是交易监控
    eventId: String, // 本事件的id
    serviceId: String, // 本次监控服务的id
    state: Number, // 3done 2doing 1todo
    totalSides: Number, // 监控一共有几方
    side: Number, // 当前事件属于哪一方
    currentSide: Number, // 当前登录的用户属于哪一方
    content: String, // 事件的描述
    files: {
      type: Array,
      default: []
    }, // 当前事件中 包含的文件
    isEdit: {
      type: Boolean,
      default: false
    }, // 是否是绘图流程
    isAudit: {
      type: Boolean,
      default: false
    }, // 是否是审核流程
    allState: Number // 整个交易流程的状态 3的情况下才是正在进行交易监控
  },
  data() {
    return {
      uploader: null,
      showFiles: false,
      finishShow: false
    }
  },
  computed: {
    showUpload() {
      if (this.state !== 3 && this.currentSide === this.side && this.allState === 3) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.initUploader()
  },
  methods: {
    onEdit() {
      this.$emit('edit')
    },
    onDelete() {
      this.$emit('delete')
    },
    onStartAudit() {
      if (this.files.length === 0) {
        this.$toasted.show('没有文件可以查看')
      } else {
        this.showFiles = true
        this.$nextTick(() => {
          this.$refs.fileBrowser.update()
        })
      }
    },
    onDoneAudit() {

    },
    onCheckAudit() {

    },
    onCheck() {
      if (this.files.length === 0) {
        this.$toasted.show('没有文件可以查看')
      } else {
        this.showFiles = true
        this.$nextTick(() => {
          this.$refs.fileBrowser.update()
        })
      }
    },
    initUploader() {
      if (this.tradeType === 'law') {
        this.uploader = new FileUploadManager('law-file', 'uploaderBtn' + this.eventId, (data) => {
          this.$toasted.show('上传成功')
          if (this.tradeType === 'law') {
            let arr = data.split('/')
            let name = arr[arr.length - 1]
            this.$http.post('/legalService/business/monitor', {
              id: this.serviceId,
              eventId: this.eventId,
              address: data,
              name: name
            }).then(data => {
              if (data.data.httpCode === 200) {
                this.$emit('fileUploaded')
              } else {
                this.$toasted.show(data.data.msg)
              }
            }).catch(err => {
              console.log(err)
              this.$toasted.show('网络错误')
            })
          }
        }, (msg) => {
          this.$toasted.show(msg)
        }, true)
      }
    }
  },
  filters: {
    sideFilter(v) {
      if (v === 0) {
        return '甲方'
      }
      if (v === 1) {
        return '乙方'
      }
      if (v === 2) {
        return '丙方'
      }
      if (v === 3) {
        return '丁方'
      }
      if (v === 4) {
        return '戊方'
      }
      return ''
    }
  }
}

</script>
<style type="text/css" scoped>
.event-item {
  position: relative;
  margin-left: 100px;
}

.event-box {
  width: 450px;
  height: 80px;
  margin: 10px 0;
  box-shadow: 3px 3px 15px 0 #d8e7ff;
}

.event {
  float: left;
  width: 55%;
  padding: 15px 15px 0 15px;
  font-size: 14px;
}

.side {
  color: #818181;
}

.event-content {
  margin-top: 3px;
  color: #282828;
}

.file-box {
  float: left;
  width: 17%;
  padding-top: 15px;
}

.btn-box {
  float: left;
  width: 27.7%;
  padding: 5px 0;
  height: 78px;
}

.btn-box .btn {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin: 2px 0;
  color: #fff;
  background-color: #6ba5ff;
  cursor: pointer;
}

.btn-box .btn:active {
  background-color: #608dd4;
}

.btn-box .btn-margin-top {
  margin-top: 20px;
}

.done {
  background-color: #21e22a;
}

.doing {
  background-color: #fcd41e;
}

.todo {
  background-color: #ff1900;
}

.event-circle {
  position: absolute;
  top: 30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.event-line {
  position: absolute;
  top: 38px;
  height: 4px;
}

.fr {
  float: right;
}

.text-right {
  text-align: right;
}

.margin-2-2 {
  margin-left: 650px !important;
}

.line-2-2 {
  width: 50px !important;
  left: -50px !important;
}

.circle-2-2 {
  left: -59px !important;
}

.line-2-1 {
  width: 50px !important;
  left: 450px !important;
}

.circle-2-1 {
  left: 490px !important;
}

.small-btn-css {
  left: 0px;
  top: -33px;
}

</style>
